// 导入lesss文件,不用文件后缀
// @import "less-test"

// less定义变量时
//     1.变量名不能以数字开头
//     2.变量名不能含有特殊符号~@#等
//     3.变量名区分大小写
@color: red;
@font14: 14px;
html {
  font-size: @baseFont;
}
body {
  background-color: @color;
}
div {
  color: @color;
  font-size: @font14;
}
a {
  font-size: @font14;
}

// less嵌套
// 1.子元素样式直接写人父元素样式中，生成的CSS文件会自动变成后代选择器
// 2.如果需要伪类、伪元素选择器，则需要在选择器前加&
.test {
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 auto;
  &:hover {
    background-color: #000;
  }
  p + a {
    color: @color;
  }
}

// less运算
// 1.运算符两边必须一个空格隔开
// 2.进行运算的两个数，如果只有一个有单位，则运算结果以其为准
// 3.进行运算的两个数，如果都有单位，则以前者为准
// 4.进行除法运算时要加括号
// 5.颜色也进行运算
@baseFont: 50px;
@border:5px + 5;
.testtwo {
  width: 200 - 50px;
  height: (200px - 50) * 2;
  border: @border solid #fff;
  background-color: #666 - #222;
  img {
    width: (82rem / @baseFont);
    height: (82rem / @baseFont);
  }
}
